<template>
  <el-dialog title="添加工作组" @open="setWorks" append-to-body width="500" :visible.sync="valueModel">
    <el-form :model="addTeamForm" ref="ruleForm" size="large" :rules="rules">
      <el-form-item label="工作组名称" label-width="120px" prop="name">
        <el-input placeholder="请输入名称" v-model="addTeamForm.name"></el-input>
      </el-form-item>
      <el-form-item label="所属部门" label-width="120px" v-if="departmentId !== organizationById">
        <el-select v-model="addTeamForm.departmentId" disabled placeholder="请选择">
          <el-option
              v-for="item in departmentArr"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="负责人" label-width="120px" prop="chargeId">
        <el-select v-model="addTeamForm.chargeId" style="width: 100%" placeholder="请选择">
          <el-option
              v-for="item in memberIdsArr"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属人员" label-width="120px" prop="memberIds">
        <el-select v-model="addTeamForm.memberIds" style="width: 100%" multiple placeholder="请选择">
          <el-option
              v-for="item in memberIdsArr"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="说明" label-width="120px"  prop="description" >
        <el-input type="textarea" v-model="addTeamForm.description"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelFun">取 消</el-button>
      <el-button type="primary" @click="addFun()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "addPersonnel",
  props: {
    value: {
      type: Boolean,
      default: false
    },
    dialogTitle: {
      type: String,
      default: "新员工入职"
    },
    organizationById: {
      type: String,
      default: ''
    },
    departmentId: {
      type: String,
      default: ''
    }
  },
  computed: {
    valueModel() {
      return this.value
    }
  },
  data() {
    return {
      formLabelWidth: '130px',
      addTeamForm: {
        departmentId: '',
        name: '',
        description: '',
        chargeId: '',
        tags: '',
        memberIds: []
      },
      departmentArr: [],
      memberIdsArr: [],
      rules: {
        name: [
          { required: true, message: '请输入工作组名称', trigger: 'blur' },
        ],
        chargeId: [
          { required: true, message: '请选择所属人员', trigger: 'change' }
        ],
        memberIds: [
          { required: true, message: '请选择所属人员', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请填写说明', trigger: 'blur' }
        ]
      }
    }
  },
  model: {
    prop: "value",
    event: "change",
  },
  methods: {
    setWorks() {
      this.addTeamForm = {
        name: '',
        description: '',
        chargeId: '',
        tags: '',
        departmentId: null,
        memberIds: []
      }

      if (this.departmentId !== this.organizationById) {
        this.addTeamForm.departmentId = this.departmentId
      }

      this.getOrganizationForSubordinate()

    },
    getWorkList() {

    },
    cancelFun() {
      this.$emit('change', false)
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    async getOrganizationForSubordinate() {
      const res = await this.$axios.post('/graphql', {
        query: `{
          organizationQueryRepository {
            findById(id: "${this.organizationById}") {
              id
              employees {
                getItems {
                  id
                  name
                  pinyin
                  phoneNumber
                  officialRank
                  isMale
                  removed
                  department {
                    id
                    name
                  }
                }
              }
              departments {
                getItems {
                  id
                  removed
                  name
                  employees {
                   id
                   name
                   pinyin
                   removed
                      phoneNumber
                      officialRank
                      isMale
                      department {
                        id
                        name
                      }
                  }
                   getTeams {
                     id
                     name
                     getItems {
                       id
                       name
                     }
                   }
                }
              }
            }
          }
        }`}
      )
      if (!res.data.errors) {
        const nData = res.data.data.organizationQueryRepository.findById
        this.departmentArr = nData.departments.getItems
        this.memberIdsArr = nData.employees.getItems
      }
    },
    addBeforeFun() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.addFun()
        } else {
          return false;
        }
      });
    },
    async addFun() {
      const memberIds = JSON.stringify(this.addTeamForm.memberIds)
      const res = await this.$axios.post('/graphql', {
        query: `mutation {
          teamManagementScene {
            createTeam(
              ${this.addTeamForm.departmentId ? `departmentId: "${this.addTeamForm.departmentId}"` : ''}
              name: "${this.addTeamForm.name}"
              description: "${this.addTeamForm.description}"
              chargeId: "${this.addTeamForm.chargeId}"
              tags: ["test"]
              memberIds: ${memberIds}
            )
          }
        }`
      })
      if (!res.data.errors) {
        this.dialogFormVisible = false
        this.$message.success('添加成功')
        this.$emit('updateData')
        this.$emit('change', false)
      }else {
        this.$message.error(res.data.errors[0].message)
      }
    },
  },

}
</script>



<style scoped lang="scss">
</style>
